﻿<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div class="chart-content">
      <div class="filter-title">
        <el-form label-position="right">
          <el-form-item>
            <el-select v-model="listQuery.name"
                       clearable
                       style="width: 160px; height:32px"
                       class="filter-item"
                       :placeholder="$t('region.districtsName')">
              <el-option v-for="item in districtsOptions"
                         :key="item.id"
                         :label="item.name"
                         :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="listQuery.linkman"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('public.linkman')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="listQuery.linkman_mobile"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('public.mobile')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <div class="search-button"
               @click="handleFilter">
            <img src="@/assets/images/bg_search@2x.png" />
          </div>
          <div class="search-button"
               @click="handleRefresh">
            <img src="@/assets/images/bg_reset@2x.png" />
          </div>
        </el-form>
      </div>
      <div class="chart-list">
        <el-table :key="tableKey"
                  v-loading="listLoading"
                  :data="list"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255,255,255,0.2)"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%min-height:1000px">
          <el-table-column fixed="left"
                           align="center"
                           :label="$t('table.id')"
                           width="65">
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('region.districtsName')">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('public.linkman')">
            <template slot-scope="scope">
              <span>{{ scope.row.linkman }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('public.mobile')">
            <template slot-scope="scope">
              <span>{{ scope.row.linkman_mobile }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           :label="$t('table.actions')"
                           class-name="operat-button"
                           fixed="right">
            <template slot-scope="scope">
              <div class="read-img"
                   @click="handleRead(scope.row)">
                <img src="@/assets/images/read@2x.png" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination background
                       :current-page="listQuery.page"
                       :page-sizes="[10, 20, 30, 50]"
                       :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"></el-pagination>
      </div>
      <!-- 查看 -->
      <el-dialog :title="textMap[dialogStatus]"
                 :visible.sync="dialogFormVisible">
        <el-form :model="temp"
                 label-width="30%"
                 label-position="right"
                 size="small">
          <div class="pops">
            <div class="information-title">
              <span class="icon-title"></span>
              <span>基础信息:</span>
            </div>
            <div class="pops-normal">
              <el-form-item :label="$t('region.name') + ' :'">
                <el-input v-model="temp.name"
                          :readonly="dialogStatus == 'read' ? true : false"></el-input>
              </el-form-item>
              <el-form-item :label="$t('public.linkman') + ' :'">
                <el-input v-model="temp.linkman"
                          :readonly="dialogStatus == 'read' ? true : false"></el-input>
              </el-form-item>
              <el-form-item :label="$t('public.mobile') + ' :'">
                <el-input v-model="temp.linkman_mobile"
                          :readonly="dialogStatus == 'read' ? true : false"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/javascript">
import { getToken } from "@/utils/auth"; // get token from cookie
export default {
  name: "sevenDistricts",
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      temp: {
        name: "",
        linkman: "",
        linkman_mobile: ""
      },
      listQuery: {
        page: 1,
        limit: 20,
        name: "",
        linkman: "",
        linkman_mobile: ""
      },
      districtsOptions: [],
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        read: "查看"
      }
    };
  },
  created() {
    const token = getToken()
    if (token && !this.$store.state.socket.loginTransition && !this.$store.state.socket.loginAccount) {
      this.tokenLogin(token)
    }
    this.getList();
  },
  methods: {
    tokenLogin(token) {
      const path = {
        app: "wxadmin",
        api: "api_wxadmin_admin_keepLogin",
        version: "1.0",
        type: 2,
        data: {
          token: token
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        id: undefined
      };
      this.getList();
    },
    // 获取七大区列表
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        name: this.listQuery.name ? this.listQuery.name : "",
        linkman: this.listQuery.linkman ? this.listQuery.linkman : "",
        linkman_mobile: this.listQuery.linkman_mobile
          ? this.listQuery.linkman_mobile
          : ""
      };
      const itocIndexPath = {
        company: "STQ",
        api: "api_archives_itoc_sevenRegional",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(itocIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 打开查看弹窗
    handleRead(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = "read";
      this.dialogFormVisible = true;
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else if (resj.code === 403 && resj.api === "api_wxadmin_admin_keepLogin") {
          this.$router.push({ path: "/login" });
        } else {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            })
          } else if (resj.api === "api_archives_itoc_sevenRegional") {
            this.list = resj.data;
            this.total = resj.count;
            this.districtsOptions = resj.data;
            this.listLoading = false;
          }
        }
      }
    }
  }
};
</script>
